<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这里的变量不是方法！ -->
        <p>{{reveredText}}</p>
        单价：<input v-model="a"><br>
        数量：<input v-model="b"><br>
        总价：{{totals}}
        <br>
        {{now}}
    </div>

    <div id="app2">
        姓名：{{fullname}}
    </div>
    <div id="app3">
        <!-- 这里使用的是方法！！！ -->
        {{res()}}
    </div>
    <script>

        var app3 = new Vue({
            el:'#app3',
            data:{
                text:'wyh,123'
            },
            methods:{
                res:function(){
                    return this.text.split(',').reverse().join(',')
                }
            }
        })


        var app2 = new Vue({
            el:'#app2',
            data:{
                firstName :'jack',
                lastName:'green'
            },
            computed:{
                fullname:{
                    //getter,用于读取
                    get:function(){
                        return this.firstName + ' ' + this.lastName;
                    },
                    //setter,写入的时候触发
                    set:function(newValue){
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length -1]
                        
                    }
                }


            }
        })
        //app2.fullname = 'w wyh'

        var app = new Vue({
            el:'#app',
            data:{
                text:'hello,world!',
                a:100,
                b:2
            },
            computed:{
                reveredText:function(){
                    //return this.text.split(',').reverse().join(',');
                    //从app2中调用数据。
                    return  app2.fullname;
                },
                totals:function(){
                    return this.a*this.b +'元'
                },

                now:function(){
                    //时间戳不会变化，这个充分说明数据是基于缓存的。也就是说已经到了本地的原始数据是不会更新的，所以computed方法适用于大数据下载到本地的计算！
                    return Date.now();
                }
                
            }
        });
    </script>
    
</body>
</html>